<template>
  <div class="app">
    <div class="app-container" :style="{ transform: `scale(${scale})` }">
      <header class="app-header">
        <h1 class="title">数据大屏实时展示</h1>
        <span class="time">当前时间: {{ time }}</span>
      </header>
      <main class="app-main">
        <div class="left">
          <Left />
        </div>
        <div class="center"><Center /></div>
        <div class="right"><Right /></div>
      </main>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from "vue";
import dayjs from "dayjs"; //  pnpm add dayjs

import Left from "./views/left/index.vue";
import Center from "./views/center/index.vue";
import Right from "./views/right/index.vue";

/************************** 1. 显示实时时间功能 ************************/
const time = ref(dayjs().format("YYYY年MM月DD日 HH时mm分ss秒"));
let timeId: number;

onMounted(() => {
  timeId = setInterval(() => {
    time.value = dayjs().format("YYYY年MM月DD日 HH时mm分ss秒");
  }, 1000);
});

onUnmounted(() => {
  clearInterval(timeId);
});
/************************** 2. 适配 ************************/
const scale = ref(1);

const fitScreen = () => {
  // 当前屏幕的宽高
  const htmlEl = document.documentElement;
  const clientWidth = htmlEl.clientWidth;
  const clientHeight = htmlEl.clientHeight;
  // 原来设计稿宽高
  const draftWidth = 1366;
  const draftHeight = 599;

  // 将设计稿宽高比 和 当前屏幕的宽高比 进行比较
  if (draftWidth / draftHeight > clientWidth / clientHeight) {
    // 设计稿大于当前屏幕的值，当前屏幕的值的分母就更大，clientHeight更大
    // 当前屏幕是一个更高的屏幕，所以高度没法占满，只能占满宽度，所以使用宽度计算比例
    scale.value = clientWidth / draftWidth;
  } else {
    scale.value = clientHeight / draftHeight;
  }
};

onMounted(() => {
  fitScreen();

  // 屏幕大小发生变化时触发事件
  window.addEventListener("resize", () => {
    fitScreen();
  });
});
</script>

<style scoped lang="scss">
.app {
  width: 100%;
  height: 100%;
  background-color: var(--bg-color); // 使用 css 变量
  // 外边距重叠问题。解决方案：开启BFC
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.app-container {
  width: 1366px;
  height: 599px;
}

.app-header {
  height: 60px;
  background-image: url("./assets/images/head_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 110%;

  display: flex;
  justify-content: center;
  align-items: center;

  position: relative;
}

.title {
  margin: 0;
  font-size: 22px;
  color: var(--color-white);
}

.time {
  position: absolute;
  right: 10px;
  top: 14px;
  font-size: 12px;
  color: var(--color-white-opacity-5);
}

.app-main {
  display: flex;
  height: calc(100% - 60px);
  padding: 0 10px;
}

.left,
.right {
  width: 340px;
  height: 100%;
}

.center {
  width: 666px;
  height: 100%;
}
</style>
